<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>课表查询</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" href="/ui/assets/css/amazeui.min.css"/>
  <style>
  	table{
	  	table-layout:fixed !important;
  	}
  	td{
	  	word-break: break-all;
  	}
  </style>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
  <h1 class="am-header-title">
    <a href="#title-link" class=""></a>
  </h1>
  <div class="am-header-right am-header-nav">
	<div class="am-dropdown" data-am-dropdown>
	  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>选择星期 <span class="am-icon-caret-down"></span></button>
	  <ul class="am-dropdown-content">
	    <li onclick="query(1)"><a href="#">周一</a></li>
	    <li onclick="query(2)"><a href="#">周二</a></li>
	    <li onclick="query(3)"><a href="#">周三</a></li>
	    <li onclick="query(4)"><a href="#">周四</a></li>
	    <li onclick="query(5)"><a href="#">周五</a></li>
	    <li onclick="query(6)"><a href="#">周六</a></li>
	    <li onclick="query(7)"><a href="#">周日</a></li>  
	  </ul>
	</div>
  </div>
</header>

<form class="am-form am-form-horizontal am-margin-top" action="/doQueryCourse" method="post" autocomplete="off" >
	<div class="am-g">
		<div class="am-u-sm-6">
			<select name="schoolTerm" id="schoolTerm">
			</select>
		</div>
		<div class="am-u-sm-6">
			<select name="institute" id="institute" onchange="updateClasses()">
			</select>
		</div>
		<div class="am-u-sm-6 am-margin-top">
			<select name="year" id="year" onchange="updateClasses()">
			</select>
		</div>
		<div class="am-u-sm-6 am-margin-top">
			<select name="_class" id="_class">
			</select>
		</div>
		<div class="am-u-sm-12 am-margin-top">
			<button class="am-btn am-btn-success am-btn-block" type="submit">查询</button>
		</div>
		
	</div>
</form>

<div id="course" class="am-margin-top">
	
</div>

<script type="text/art-template" id="schoolTerm-art-template">
{{each baseData.TERMS as term index}}
	<option value="{{term.value}}">{{term.name}}</option>
{{/each}}
</script>

<script type="text/art-template" id="institute-art-template">
{{each baseData.INSTITUTES as institute index}}
	<option value="{{institute.value}}">{{institute.name}}</option>
{{/each}}
</script>

<script type="text/art-template" id="year-art-template">
{{each baseData.YEARS as year index}}
	<option value="{{year.value}}" {{if year.value==y }} selected="selected" {{/if}} >{{year.name}}</option>
{{/each}}
</script>


<script type="text/art-template" id="class-art-template">
{{each classes as class_ index}}
	<option value="{{class_.value}}" >{{class_.name}}</option>
{{/each}}
</script>

<script type="text/art-template" id="course-art-template">
<table class="am-table am-table-bordered">
  <thead>
	  <tr class="am-primary">
	    <th>节次</th>
	    <th width="25%">课程</th>
	    <th width="20%">教师</th>
	    <th>教室</th>
	    <th>课周</th>
	  </tr>
  </thead>
  <tbody>
{{each courses as course index}}
	  <tr {{if course%2 == 1 }} class="am-danger" {{/if}} >
	    <td>{{course.node}} 
		{{if course.more != null }}
		<div class="am-hide">
		<table class="am-table am-table-bordered">
		  <tbody>
			{{each course.more as m index}}
				<tr>	
	    			<td>{{m.name}}</td>
	    			<td>{{m.teacher}}</td>
					<td>{{m.classroom}}</td>
	    			<td>{{m.time}}</td>
				</tr>
			{{/each}}
		  </tbody>
		</table>
		</div><br/><a onclick="openMore(this)">查看更多...</a>
		{{/if}} </td>
	    <td>{{course.name}}</td>
	    <td>{{course.teacher}}</td>
		<td>{{course.classroom}}</td>
	    <td>{{course.time}}</td>
	  </tr>
{{/each}}
  </tbody>
</table>
</script>



<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "  id="navbar">
    <ul id="menus" class="am-navbar-nav am-cf am-avg-sm-3">
    
        <li>
            <a href="/home.html">
            	<span class="am-icon-home"></span>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li>
            <a href="/grade.html">
            	<span class="am-icon-book"></span>
                <span class="am-navbar-label">成绩</span>
            </a>
        </li>
        <li>
            <a href="/course.html">
            	<span class="am-icon-list"></span>
                <span class="am-navbar-label">课表</span>
            </a>
        </li>
    </ul>
</div>

<div class="am-popup" id="popup">
  <div class="am-popup-inner">
    <div class="am-popup-hd">
      <h4 class="am-popup-title">更多课程</h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
    </div>
    <div class="am-popup-bd" id="popup-msg">
    </div>
  </div>
</div>

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="loading">
  <div class="am-modal-dialog">
    <div id="modal-loading-msg" class="am-modal-hd">加载中...</div>
    <div class="am-modal-bd">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示</div>
    <div class="am-modal-bd" id="alert-msg">
    	获取失败。
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

</body>
<script src="/ui/assets/js/jquery.min.js"></script>
<script src="/ui/assets/js/amazeui.min.js"></script>
<script src="/template.js"></script>
<script src="/moment.js"></script>
<script type="text/javascript">
	var weeks = [
          	'星期一','星期二',
          	'星期三','星期四',
          	'星期五','星期六','星期日'
          ];
	var data = {};
    data['baseData'] =  %%baseData%%;
    data['y'] = moment().subtract(1,'Y').get('Y');
    $('#schoolTerm').html(template('schoolTerm-art-template', data));
    $('#institute').html(template('institute-art-template', data));
    $('#year').html(template('year-art-template', data));
    
    $(function(){
    	//更新班级
    	updateClasses();
    	
    });
    
	$(function(){
		$("form").bind("submit",function(){
			
			$.ajax({
				url:'/doQueryCourse',
				data:$("form").serializeArray(),
				dataType:'json',
				type:'POST',
				success:function(_data_){
					if(_data_.err != "0"){
						$("#alert").modal();
					}
					else{
						data['courses'] = _data_['courses'];
						query(1);
					}
				},
				error:function(){
					$("#alert").modal();
				},
				beforeSend:function(){
					$("#modal-loading-msg").text("加载课表中...");
					$("#loading").modal();
				},
				complete:function(){
					$("#loading").modal("close");
				}
			});
			return false;
		});
	});
    
    
	function updateClasses(){
		$.ajax({
			url:'/doQueryClass',
			data:$("form").serializeArray(),
			dataType:'json',
			type:'POST',
			success:function(_data_){
				if(_data_.err != "0"){
					$("#alert").modal();
				}
				else{
					data['classes'] = _data_['classes'];
					console.log(data);
					$('#_class').html(template('class-art-template', data));
				}
			},
			error:function(){
				$("#alert").modal();
			},
			beforeSend:function(){
				$("#modal-loading-msg").text("加载班级中...");
				$("#loading").modal();
			},
			complete:function(){
				$("#loading").modal("close");
			}
		});
	}
	
    /**
    * 根据节次
    */
    function query(week){
    	if(typeof(data['courses']) != 'undefined' )
    	{
	    	var courses = [];
	    	var len = data['courses'].length;
	    	for(var i=0 ; i<len ;i++){
	    		var course = data['courses'][i];
	    		if(course['week'] == weeks[week-1]){
	    			courses.push(course);
	    		}
	    	}
	    	$('#course').html(template('course-art-template', {'courses':courses}));
    	}
    }
    
    function openMore(a){
    	
    	var c = $(a).closest("td").find("div").html();
    	$("#popup-msg").html(c);
    	$("#popup").modal();
    }
    
</script>


</html>